<template>
  <div class="flight-monitor-container">
    <el-row :gutter="20">
      <el-col :span="6">
        <DataImportPanel @data-imported="handleDataImported" />
        <DataFilterPanel
            :data="flightData"
            @filter-changed="handleFilterChange"
            class="mt-4"
        />
      </el-col>

      <el-col :span="18">
        <el-tabs v-model="activeTab" type="border-card" style=" background: linear-gradient(135deg, #0c1124 0%, #182044 100%);">
          <el-tab-pane label="飞行轨迹" name="track">
            <FlightMap :data="filteredData" ref="flightDataRef"/>
          </el-tab-pane>
          <el-tab-pane label="高度变化" name="altitude">
            <AltitudeChart :data="filteredData" ref="altitudeDataRef"/>
          </el-tab-pane>
          <el-tab-pane label="速度分析" name="velocity">
            <VelocityChart :data="filteredData" ref="velocityDataRef" />
          </el-tab-pane>
          <el-tab-pane label="姿态变化" name="attitude">
            <AttitudeChart :data="filteredData" ref="attitudeDataRef" />
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import {ref, reactive, computed, watch} from 'vue'
import DataImportPanel from './DataImportPanel.vue'
import DataFilterPanel from './DataFilterPanel.vue'
import FlightMap from './FlightMap.vue'
import AltitudeChart from './AltitudeChart.vue'
import VelocityChart from './VelocityChart.vue'
import AttitudeChart from './AttitudeChart.vue'

// 响应式数据
const flightData = ref([])
const filteredData = ref([])
const activeTab = ref('track')
const flightDataRef = ref(null)
const altitudeDataRef = ref(null)
const velocityDataRef = ref(null)
const attitudeDataRef = ref(null)
//监控activeTab变量
watch(activeTab, (newValue) => {
  console.log(newValue)
  if (newValue === 'track') {
    flightDataRef.value.changeTab(newValue)
  }else if (newValue === 'altitude'){
    altitudeDataRef.value.changeTab(newValue)
  }else if (newValue === 'velocity'){
    velocityDataRef.value.changeTab(newValue)
  }else if (newValue === 'attitude'){
    attitudeDataRef.value.changeTab(newValue)
  }
})
function changeTab(event) {
  console.log(event)
}

// 处理导入的数据
const handleDataImported = (parsedData) => {
  flightData.value = parsedData
  filteredData.value = [...parsedData]
}

// 处理筛选条件变化
const handleFilterChange = (filtered) => {
  filteredData.value = filtered
}
</script>

<style scoped>
.flight-monitor-container {
  padding: 20px;
  min-height: 100vh;
  background: linear-gradient(135deg, #0c1124 0%, #182044 100%);
}

.mt-4 {
  margin-top: 16px;
}
</style>